html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: auto;
  overflow-x: hidden; /* Prevent horizontal scrolling */
}

.container {
  /* max-width: 1200px; */
  width: 100%;
  margin: 0 auto;
  /* padding: 20px; */
  font-family: Arial, sans-serif;
  color: #333;
  overflow: auto;
  overflow-x: hidden; /* Ensure the container does not allow horizontal scrolling */
}
.itemContainer{
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.message {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: 5px;
}

.playerGrid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1vw;
  flex-wrap: wrap; /* 允许子元素换行 */
}
.roleGrid {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1vw;
  flex-wrap: wrap; /* 允许子元素换行 */
}
.gameRole {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1vw;
  flex-wrap: wrap; /* 允许子元素换行 */
}
.gameRoleItem {
  text-align: center;
  background: #ffe6e6;
  box-shadow:
    3px 3px 3px #c8c9cb,
    -3px -3px 3px #ffffff;
  width: 9vw;
  height: 14vw;
  position: relative;
  justify-content: center;
  border: 1px solid black;
  border-radius: 5%;
}
h5 {
  /* margin-top:1vw; */
}
.gameRoleItem img {
  margin: 1vw 1vw 0 1vw;
  width: 7vw;
  height: 7vw;
  max-height: 7vw;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s;
}

.gameRoleItem div {
  /* margin-bottom:1vw ; */
}
.playerItem {
  text-align: center;
  /* padding: 1vw;
  border: 1px solid #ddd;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1); */
  border-radius: 50%;
  background: #ebecef;
  box-shadow:
    3px 3px 3px #c8c9cb,
    -3px -3px 3px #ffffff;
  width: 12vw;
  height: 12vw;
  position: relative;
  justify-content: center;
}
.roleItem {
  text-align: center;
  padding: 1vw;
  border: 1px solid black;
  border-radius: 5px;
  background-color: #ffe6e6;
  box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1);
  position: relative;
}
.playerItem img {
  width: 14vw;
  width: 14vw;
  margin-bottom: 1vw;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s;
}
.roleItem img {
  width: 12vw;
  height: 12vw;
  /* margin-bottom: 1vw; */
  max-width: 12vw;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s;
}
.playerItem img:hover,
.deckGrid img:hover,
.roleItem img:hover {
  /* transform: scale(1.1); */
}

.playerItem button,
.roleItem button {
  display: block;
  width: 100%;
  padding: 1vw;
  background-color: #ff4d4d;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.playerItem button:hover,
.roleItem button:hover {
  background-color: #ff1a1a;
}

.deckGrid {
  display: flex;
  justify-content: center;
  gap: 1vw;
  margin-bottom: 20px;
  position: relative;
}

.deckGrid img {
  width: 9vw;
  height: 14vw;
  border-radius: 5px;
  box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1);
}
.deckGridName {
  position: absolute;
  left: 50%;
  top: 50%;
  font-size: 5vw;
  height: 21vw;
  color: black;
  width: 16vw;
  writing-mode: vertical-rl;
  z-index: 10;
}
h2,
h3 {
  text-align: center;
  margin-bottom: 20px;
}

.currentRole img {
  display: block;
  margin: 0 auto;
  width: 14vw;
  height: 21vw;
  border-radius: 5px;
  box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1);
}

.currentPhase,
.logs,
.voteResults,
.gameConfig {
  margin-bottom: 20px;
  padding: 1vw;
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.voteResults p {
  color: #ff4d4d;
  font-weight: bold;
}

.logs ul,
.voteResults ul {
  list-style: none;
  padding: 0;
}

.logs ul li,
.voteResults ul li {
  background-color: #fff;
  border: 1px solid #ddd;
  margin-bottom: 5px;
  padding: 1vw;
  border-radius: 5px;
}
.gameInfoIcon {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  font-size: 2vw;
  text-align: center;
  line-height: 3vw;
  width: 3vw;
  height: 3vw;
  background-color: #ff4d4d;
  color: white;
  border-radius: 50%;
}
.infoIcon {
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
  font-size: 2vw;
  text-align: center;
  line-height: 3vw;
  width: 3vw;
  height: 3vw;
  background-color: #ff4d4d;
  color: white;
  border-radius: 50%;
}

.tooltip {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 1vw 20px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 1000;
}
.onlineStatus {
  position: absolute;
  top: 75%;
  left: 75%;
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  text-align: center;
  font-size: 2vw;
  line-height: 3vw;
  color: white;
}
.roomHolder {
  position: absolute;
  top: 2%;
  left: 2%;
  width: 6vw;
  height: 3vw;
  border-radius: 25%;
  color: white;
  text-align: center;
  font-size: 2vw;
  line-height: 3vw;
}
.userName {
  line-height: 12vw;
  font-size: 1vw;
  justify-content: center;
  text-align: center;
}
.playerItemIndex {
  position: absolute;
  top: 75%;
  left: 5%;
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  text-align: center;
  font-size: 1.7vw;
  line-height: 3vw;
  color: white;
  background-color: black;
}
.playerItemBtn {
  height: 4vw;
  width: 12vw;
  margin-top: 1vw;
  border-radius: 15%;
  font-size: 2vw;
  line-height: 4vw;
  cursor: pointer;
  background: #ebecef;
  box-shadow:
    3px 3px 3px #c8c9cb,
    -3px -3px 3px #ffffff;
  color: black;
  text-align: center;
  justify-content: center;
}
.removeItem {
  position: absolute;
  top: 5%;
  left: 75%;
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  text-align: center;
  font-size: 3vw;
  line-height: 3vw;
  color: black;
}
.isMe {
  position: absolute;
  top: 75%;
  left: 5%;
  width: 3vw;
  height: 3vw;
  border-radius: 50%;
  text-align: center;
  font-size: 1.7vw;
  line-height: 3vw;
  color: white;
}

.gameInfoName {
  font-size: 2vw;
}
.roleCount {
  font-size: 2vw;
}
.ownCard{
  width: 12vw;
  height: 18vw; 
  margin:2vw auto;
  border: 1px solid black;
  text-align: center;
  border-radius: 5%;
}
.ownCardImg{
  width: 12vw;
  height: 12vw; 
}
.ownCardback{
  width: 12vw;
  height: 18vw; 
  z-index: 10;
}
/* 媒体查询 */
@media screen and (min-width: 768px) {
  .container {
    padding: 1vw;
  }

  .playerGrid{
    display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-wrap: wrap; /* 允许子元素换行 */
  gap: 1vw;
  }
  .roleGrid {
    display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 1vw;
  flex-wrap: wrap; /* 允许子元素换行 */
  }
  .playerItem {
    text-align: center;
    /* padding: 1vw;
    border: 1px solid #ddd;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0 0 1vw rgba(0, 0, 0, 0.1); */
    border-radius: 50%;
    background: #ffe6e6;
    box-shadow:
      3px 3px 3px #c8c9cb,
      -3px -3px 3px #ffffff;
    width: 60px;
    height: 60px;
    position: relative;
    justify-content: center;
  }
  .playerItem img {
    width: 60px;
    height: 60px;
  }

  .deckGrid img {
    width: 60px;
    height:
     90px;
  }
  .deckGrid {
    display: flex;
    justify-content: center;
    gap: 1vw;
    margin-bottom: 20px;
    position: relative;
  }
  .deckGridName {
    position: absolute;
    left: 3px;
    top: 5px;
    font-size: 10px;
    height: 81px;
    color: white;
    width: 54px;
    writing-mode: vertical-rl;
  }
  .currentRole img,
  .roleItem img,.gameRoleItem img{
    width: 60px;
    height: 60px;
    max-height: 60px;
    margin: 1px;
  }
  .currentRole,.roleItem,
  .gameRoleItem {
    text-align: center;
    background: #ffe6e6;
    width: 60px;
    height: 80px;
    position: relative;
    justify-content: center;
    border: 1px solid black;
    border-radius: 5%;
  }
  .playerItem button,
  .roleItem button {
    padding: 5px;
  }
  .infoIcon,
  .gameInfoIcon {
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    font-size: 11px;
    line-height: 13px;
    text-align: center;
    width: 13px;
    height: 13px;
    background-color: #ff4d4d;
    color: white;
    border-radius: 50%;
  }
  .onlineStatus {
    position: absolute;
    top: 75%;
    left: 75%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    text-align: center;
    font-size: 8px;
    line-height: 10px;
    color: white;
  }
  .roomHolder {
    position: absolute;
    top: 2%;
    left: 2%;
    width: 20px;
    height: 10px;
    border-radius: 25%;
    color: white;
    text-align: center;
    font-size: 8px;
    line-height: 10px;
  }
  .userName {
    line-height: 60px;
    font-size: 10px;
    justify-content: center;
    text-align: center;
  }
  .playerItemIndex {
    position: absolute;
    top: 75%;
    left: 5%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    text-align: center;
    font-size: 8px;
    line-height: 10px;
    color: white;
    background-color: black;
  }
  .playerItemBtn {
    height: 30px;
    width: 60px;
    margin-top: 1vw;
    border-radius: 15%;
    font-size: 10px;
    line-height: 30px;
    cursor: pointer;
    background: #ffe6e6;
    box-shadow:
      3px 3px 3px #c8c9cb,
      -3px -3px 3px #ffffff;
    color: black;
    text-align: center;
    justify-content: center;
  }
  .removeItem {
    position: absolute;
    top: 5%;
    left: 75%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    text-align: center;
    font-size: 8px;
    line-height: 10px;
    color: black;
  }
  .isMe {
    position: absolute;
    top: 75%;
    left: 5%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    text-align: center;
    font-size: 8px;
    line-height: 10px;
    color: white;
  }
  .gameInfoName {
    font-size: 8px;
  }
  .roleCount {
    font-size: 8px;
  }
  .ownCard{
    width: 60px;
    height: 80px;
    margin:10px auto;
    border: 1px solid black;
    text-align: center;
    border-radius: 5%;
  }
  .ownCardImg{
    width: 60px;
    height: 60px; 
  }
  .ownCardback{
    width: 60px;
    height: 80px;
    z-index: 10;
  }
}
